<template>
  <div class="post-detail" v-if="post">
    <article class="article">
      <header class="article-header">
        <h1>{{ post.title }}</h1>
        <div class="meta">
          <time>{{ formatDate(post.date) }}</time>
          <div class="tags">
            <span v-for="tag in post.tags" :key="tag" class="tag">{{ tag }}</span>
          </div>
        </div>
      </header>
      <div class="content" v-html="post.content"></div>
    </article>
    
    <div class="comments-section">
      <h3>评论</h3>
      <div class="comment-form">
        <textarea v-model="newComment" placeholder="写下你的评论..."></textarea>
        <button @click="submitComment">提交评论</button>
      </div>
      <div class="comments-list">
        <div v-for="comment in comments" :key="comment.id" class="comment">
          <div class="comment-header">
            <span class="author">{{ comment.author }}</span>
            <time>{{ formatDate(comment.date) }}</time>
          </div>
          <p class="comment-content">{{ comment.content }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'

export default {
  name: 'Post',
  setup() {
    const route = useRoute()
    const store = useStore()
    const newComment = ref('')
    
    const post = computed(() => 
      store.getters['posts/getPostById'](route.params.id)
    )
    
    const comments = ref([])
    
    const formatDate = (date) => {
      return new Date(date).toLocaleDateString('zh-CN')
    }
    
    const submitComment = () => {
      if (!newComment.value.trim()) return
      
      comments.value.push({
        id: Date.now(),
        author: '访客',
        date: new Date(),
        content: newComment.value
      })
      
      newComment.value = ''
    }
    
    return {
      post,
      comments,
      newComment,
      formatDate,
      submitComment
    }
  }
}
</script>

<style scoped>
.post-detail {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.article-header {
  margin-bottom: 40px;
  text-align: center;
}

.meta {
  color: #666;
  margin-top: 10px;
}

.tag {
  background: #42b983;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  margin: 0 4px;
  font-size: 0.9em;
}

.content {
  line-height: 1.8;
  font-size: 1.1em;
}

.comments-section {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid #eee;
}

.comment-form textarea {
  width: 100%;
  height: 100px;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.comment-form button {
  background: #42b983;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.comment {
  margin: 20px 0;
  padding: 15px;
  background: #f9f9f9;
  border-radius: 4px;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  color: #666;
}
</style> 